<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" style="padding:0;margin:0">

<head>
  <meta charset="utf-8" />
  <title>TKEStack WebTTY</title>
  <link href="/static/css/xterm/xterm.css" rel="stylesheet" data-role="global" />
  <style>
    body {
      margin: 0;
      background-color: #000;
    }

    #terminal {
      height: 100vh;
    }

    .xterm .xterm-viewport {
      overflow-y: hidden;
    }
  </style>
  <link rel="apple-touch-icon" sizes="57x57" href="/static/image/apple-icon-57x57.png">
  <link rel="apple-touch-icon" sizes="60x60" href="/static/image/apple-icon-60x60.png">
  <link rel="apple-touch-icon" sizes="72x72" href="/static/image/apple-icon-72x72.png">
  <link rel="apple-touch-icon" sizes="76x76" href="/static/image/apple-icon-76x76.png">
  <link rel="apple-touch-icon" sizes="114x114" href="/static/image/apple-icon-114x114.png">
  <link rel="apple-touch-icon" sizes="120x120" href="/static/image/apple-icon-120x120.png">
  <link rel="apple-touch-icon" sizes="144x144" href="/static/image/apple-icon-144x144.png">
  <link rel="apple-touch-icon" sizes="152x152" href="/static/image/apple-icon-152x152.png">
  <link rel="apple-touch-icon" sizes="180x180" href="/static/image/apple-icon-180x180.png">
  <link rel="icon" type="image/png" sizes="192x192" href="/static/image/android-icon-192x192.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/static/image/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="96x96" href="/static/image/favicon-96x96.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/static/image/favicon-16x16.png">
  <link rel="manifest" href="/static/image/manifest.json">
  <meta name="msapplication-TileColor" content="#262626">
  <meta name="msapplication-TileImage" content="/static/image/ms-icon-144x144.png">
  <meta name="theme-color" content="#262626">
  <script src="/static/js/base64.min.js"></script>
  <script src="/static/js/xterm.js"></script>
  <script src="/static/js/xterm-addon-fit.js"></script>
</head>

<body>
  <div id="terminal"></div>
  <script>
    const termElem = document.getElementById('terminal');
    termElem.oncontextmenu = () => false;

    const term = new Terminal({
      fontSize: 14,
      cursorBlink: true,
      fontFamily: "'Courier New', 'Courier', monospace",
      lineHeight: 1
    });
    term.open(termElem);

    const fitAddon = new FitAddon.FitAddon();
    term.loadAddon(fitAddon);

    fitAddon.fit();
    term.focus();

    const proto = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
    const sock = new WebSocket(proto + '//' + window.location.host + '/webtty' + window.location.search);
    sock.onopen = function(event) {
      var msg = {type: "resize", rows: term.rows, cols: term.cols};
      sock.send(JSON.stringify(msg));
      msg = {type: "input", input: Base64.encode("export TERM=xterm && clear \r")};
      sock.send(JSON.stringify(msg));
    }
    sock.onclose = function(event) {
      if (event.wasClean) {
		console.log("[close] Connection closed cleanly, code: " + event.code + ", reason: " + event.reason);
	  } else {
	    console.log("[close] Connection died");
		term.write("\r");
	  }
	  term.write("Connection Reset By Peer! Try Refresh");
    }
    sock.onmessage = function(event) {
      term.write(Base64.decode(event.data));
    }
    sock.onerror = function(event) {
      console.log('[error] Connection error');
	  term.write("error: " + event.message);
	  term.destroy();
    }

    window.addEventListener("resize", function() {
      fitAddon.fit();
      var msg = {type: "resize", rows: term.rows, cols: term.cols};
      sock.send(JSON.stringify(msg));
    })

    term.onData(input => {
      var msg = {type: "input", input: Base64.encode(input)};
      sock.send(JSON.stringify(msg));
    });

    term.onTitleChange(evt => { document.title = evt; });
  </script>
</body>

</html>
